<!DOCTYPE html>
<html lang="en">

<head>

    {{template "common/head.html" .}}

    <style type="text/css">
        .page-withdraw-deposit {
            padding: 24px 40px 100px;
        }

        .page-withdraw-deposit-header {
            background: #fff;
            border-radius: 3px;
            padding: 28px 15px;
        }

        .page-withdraw-deposit-header .sub-title {
            margin-top: 8px;
            margin-bottom: 26px;
            padding-left: 52px;
            color: rgba(59, 44, 14, 0.3);
        }

        .page-withdraw-deposit-header .intro {
            color: rgba(59, 44, 14, 0.3);
            margin-bottom: 50px;
        }

        .page-withdraw-deposit-header .intro span {
            color: #3b2c0e;
            padding-left: 11px;
            cursor: pointer;
        }

        .page-withdraw-deposit-header .withdraw-count-input-wrapper {
            position: relative;
            margin-top: 16px;
            margin-bottom: 8px;
            border-bottom: 1px solid #fec901;
            padding-bottom: 8px;
        }

        .page-withdraw-deposit-header .withdraw-count-input-wrapper::before {
            position: absolute;
            width: 17px;
            height: 20px;
            background-image: url();
            background-size: cover;
            top: 0;
            left: 0;
            content: "";
        }

        .page-withdraw-deposit-header .withdraw-count-input-wrapper input {
            padding-left: 20px;
            height: 20px;
            font-size: 18px;
            width: 100%;
            border: 0;
        }

        .page-withdraw-deposit-header .withdraw-count-input-wrapper input:focus {
            outline: 0;
        }

        .page-withdraw-deposit-body {
            margin-top: 60px;
        }

        .page-withdraw-deposit-body .record-item {
            background-color: #fff;
            border-radius: 9px;
            padding: 15px 14px;
        }

        .page-withdraw-deposit-body .record-item .split-line {
            width: 100%;
            height: 2px;
            background: #fec301;
            -webkit-box-shadow: 1px 3px 9px 0px rgba(202, 202, 202, 0.71);
            box-shadow: 1px 3px 9px 0px rgba(202, 202, 202, 0.71);
            border-radius: 1px;
            margin: 8px auto 6px;
        }

        .page-withdraw-deposit-body .record-item .record-time {
            color: #757573;
        }

        .loading {
            margin-top: 2%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
        .first-loading {
            margin-top: 50%;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div class="page-main">
    <div class="page-main-container">
        <div class="child-view page-withdraw-deposit">
            <div class="page-withdraw-deposit-header">
                <div class="withdraw-count-title ui-text-18">提现金额</div>
                <div class="withdraw-count-input-wrapper">
                    <form id="data-form">
                        {{.xsrfdata}}
                        <input type="number" id="amount" name="amount">
                    </form>
                </div>
                <div class="intro ui-text-10"> 当前零钱余额{{.userInfo.WithdrawMoney | printf "%.2f"}}元 <span onclick="withdrawAll()">全部提现</span>
                </div>
                <div class="m-button m-button-default m-button-block" onclick="doSubmit()"
                     style="width: 250px; margin: 0px auto; background-color: rgb(254, 201, 1); color: rgb(59, 44, 14);">
                    提 现
                </div>
            </div>
            <div class="page-withdraw-deposit-body">
                <div class="title ui-text-20 ui-pd-l-17">提现记录</div>
                <div class="record-list" id="data-list">

                </div>
                <div id="loading" class="loading">玩命加载中...</div>
            </div>
        </div>
    </div>
    <form id="load-more-form">
        {{.xsrfdata}}
        <input type="hidden" id="cur-page" name="p" value="1">
    </form>
</div>
</body>

<script>
    var canSubmit = true,
        canLoad = true,
        p = 1,
        withdrawMoney = {{.userInfo.WithdrawMoney}};

    function doSubmit() {

        if ($('#amount').val().length <= 0) {
            layer.open({content: '请输入提现金额', skin: 'msg', time: 2});
            return false;
        }

        if (!canSubmit) return false;
        var loadIndex = layer.open({type: 2});
        canSubmit = false;

        $.ajax({
            url: '{{urlfor "teacher.UserController.DoWithdraw"}}',
            type: 'POST',
            data: $('#data-form').serialize(),
            dataType: 'json',
            success: function (res) {

                layer.close(loadIndex);
                canSubmit = true;

                layer.open({content: res.msg, skin: 'msg', time: 2});
                if (res.status == 1) {
                    setTimeout(function () {
                        location.href = '{{urlfor "teacher.UserController.Withdraw"}}';
                    }, 1000);
                }

            }
        });

    }

    function withdrawAll() {
        $('#amount').val(withdrawMoney);
    }

    function firstLoading(t) {
        $('#loading').removeClass('loading').addClass('first-loading').text(t).show();
    }

    function loading(t) {
        $('#loading').removeClass('first-loading').addClass('loading').text(t).show();
    }

    function loadMore() {

        if (!canSubmit) return false;
        canSubmit = false;
        var curPage = p++;
        $('#cur-page').val(curPage);
        if (curPage == 1) {
            firstLoading('玩命加载中...');
        } else {
            loading('玩命加载中...');
        }

        setTimeout(function () {
            $.ajax({
                url: '{{urlfor "teacher.UserController.WithdrawLoadMore"}}',
                type: 'POST',
                data: $('#load-more-form').serialize(),
                success: function (res) {

                    canSubmit = true;
                    if ($.trim(res) == "") {
                        canLoad = false;
                        if (curPage == 1) {
                            firstLoading('空空如也');
                            $('#data-list').hide();
                        } else {
                            loading('扯不动了，到底了');
                        }
                    } else {
                        $('#loading').hide();
                        $('#data-list').append(res);
                    }

                }
            });
        }, 1000);
    }

    $(function () {

        loadMore();

        $(window).scroll(function () {
            //已经滚动到上面的页面高度
            var scrollTop = $(this).scrollTop();
            //页面高度
            var scrollHeight = $(document).height();
            //浏览器窗口高度
            var windowHeight = $(this).height();
            //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
            if (scrollTop + windowHeight == scrollHeight) {
                if (!canLoad) {
                    return false;
                }
                loadMore();
            }
        });

    });
</script>

</html>